<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8"/>
    <meta name="author" content="Dzenan Ridjanovic"/>
    <title>MagicBoxes</title>   
    <link rel="stylesheet" href="css/form.css"/>
    <link rel="stylesheet" href="css/layout.css"/>
    <link rel="stylesheet" href="css/link.css"/>
    <link rel="stylesheet" href="css/list.css"/>
    <link rel="stylesheet" href="css/menu.css"/>
    <link rel="stylesheet" href="css/page.css"/>
  </head>
  
  <body>
    <header>
      <h2>Magic Boxes in Dart: Boxes with User Entered Names and Items</h2>
      <!-- http://dev.opera.com/articles/view/html-5-canvas-the-basics/ -->
    </header>
    
    <nav>
     <ul>
       <li>File
         <ul>
           <li></li>
         </ul>  
       </li>
       <li>Edit
         <ul>
           <li><button id="select-all">Select All</button></li>
           <li><button id="delete-selection">Delete Selection</button></li>
         </ul>
       </li>
       <li>View
         <ul>
           <li><button id="hide-selection">Hide Selection</button></li>
           <li><button id="show-hidden-selection">Show Selection</button></li>
         </ul>
       </li>
       <li>Create
         <ul>
           <li><button id="create-boxes-in-diagonal">Boxes in Diagonal</button></li>
           <li><button id="create-boxes-as-tiles">Boxes As Tiles</button></li>
         </ul>
       </li>
       <li>About
         <ul>
           <li>Magic Boxes in <a href="http://www.dart.org/">Dart</a></li>
           <li>Spiral 08</li>
           <li>2011-12-25</li>
           <li>Dzenan Ridjanovic</li>
         </ul>   
       </li>
     </ul>
    </nav>
    
    <section> 
      <canvas id="canvas" width="990" height="560">
        Canvas is not supported in your browser.
      </canvas>    
      <footer> 
        <button id="select"><img src="img/select.png"/></button>
        <button id="box"><img src="img/box.png"/></button>
        <button id="line"><img src="img/line.png"/></button>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
        <label for="boxName">Box</label>
        <input type="text" id="boxName"/>
        <label for="itemName">Item</label>
        <input type="text" id="itemName"/>
        <select id="itemCategory">
          <option>attribute</option>
          <option>guid</option>
          <option>identifier</option>
          <option>required</option>
        </select>
        <button id="addItem">Add</button>
        <button id="getItem">Get</button>
        <button id="setItem">Set</button>
        <button id="removeItem">Remove</button>
      </footer>
      <script type="text/javascript" src="MagicBoxes.dart.app.js"></script>
    </section>
    
    <section>
      <header>
        <h3>Overview</h3>
      </header>
      <p>
        The Magic Boxes tool is developed in <a href="http://www.dartlang.org/">Dart</a> to start learning Dart 
        (after reading the Getting Started section, developing the first 
        <a  href="https://plus.google.com/u/0/112767453954051794400/posts/igDQd1ubWQs">example</a>, 
        and the <a href="https://github.com/dzenanr/pingpong">Ping Pong</a> game). 
        The spiral approach to learning is used to advance step-by-step. 
        The tool is based on the <a href="http://code.google.com/p/magic-boxes/">Magic Boxes</a> tool developed in Java.
      </p>
      <p>
        The <a href="https://github.com/dzenanr/MagicBoxes">code</a> of Magic Boxes in Dart is kept at 
        <a href="https://github.com/">GitHub</a>. 
        If you are new to <a href="http://sixrevisions.com/resources/git-tutorials-beginners/">Git</a>, 
        you should really <a href="http://www.ralfebert.de/blog/tools/git_screencast/">start</a> learning it. 
        However, if you are impatient to start learning Dart, you may want to 
        <a href="https://github.com/dzenanr/MagicBoxes/tags">download</a> the spirals.
      </p> 
    </section>
     
    <section>
      <header>
        <h3>Creating, Moving and Selecting Boxes and Lines</h3>
      </header>
      <p>
        With the Spiral 08, you can start designing models such as the meta model in the following diagram. 
        <a href="#"><img src="img/metamodel.png"/></a>
        However, you cannot still save a model in a file. 
      </p>
      <p>
        Click the box tool to create a box, by clicking on an empty space in the board.
      </p>
      <p>
        To move a non selected box, click the box and keep the mouse down while moving it. 
        The connected lines will follow.
        A selected box cannot be moved.
      </p>
      <p>
        Click the box to select it. Click again to deselect it. 
        If there are several selected boxes (and/or lines), you may deselect them all by clicking on an empty space in the board.
        For the last selected box, its title (name) may be changed by entering text in the Box field. 
        For the last selected box, an item may be added by entering its name in the Item box, then clicking on the Add button.
        The item is an attribute of the box. In addition, it may be declared as guid (globally unique identifier--not significant to a user), 
        identifier (significant to a user) or required (mandatory value). The choice is presented in the pop-up list.
        An existing item may be obtained by entering its name and clicking on the Get button. The obtained item may be changed (Set button) 
        or even removed (Remove button).
      </p>
      <p>
        If you want to create several boxes, double-click the box tool to stay on. 
        To return to the select mode double-click the select tool.
      </p>
      <p>
        Click the line tool to create a line between the last two clicked boxes, 
        by clicking on an empty space in the board. 
        The first box is a parent and the second box is a child. By default, the parent box has 0..N cardinalities. 
        The min is 0 and the max is N. By default, the child box has 1..1 cardinalities. 
        An example is Department--0..N----1..1--Employee. 
        A department has from 0 to N employees and an employee works for exactly one department.
        Currently, cardinalities cannot be changed.
      </p>
      <p>
        Click the line, or very close to it, to select it. Click again to deselect it. 
        If there are several selected lines (and/or boxes), you may deselect them all by clicking on an empty space in the board.
      </p>
      <p>
        If you want to create several lines, double-click the line tool to stay on. 
        To return to the select mode double-click the select tool.
      </p>
    </section> 
  </body>
</html>
